<template>
	<view>
		<echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
		<button @click="updateClick">切换数据</button>
	</view>
</template>

<script>
	import echarts from '@/components/echarts/echarts.vue'
	export default {
		data() {
			return {
				option: {},
				option2: {
					notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
					tooltip: {
						trigger: 'axis',
						positionStatus: true,
						formatterStatus: false, // 自定义变量：是否格式化tooltip，设置为false时下面三项均不起作用
						formatterUnit: '元', // 自定义变量：数值后面的单位
						formatFloat2: true, // 自定义变量：是否格式化为两位小数
						formatThousands: true // 自定义变量：是否添加千分位
					},
					legend: {
						data: ['', '']
					},
					grid: {
						left: '8%',
						right: '8%',
						bottom: '8%',
						containLabel: true
					},
					xAxis: [{
						name: '位移（m）',
						nameLocation: 'middle', //轴位置
						nameGap: 26, //name名字与轴线间距
						type: 'value',
						axisLine: {
							onZero: false
						}
					}],
					yAxis: [{
						name: '载荷（KN）',
						nameLocation: 'middle', //轴位置
						nameGap: 26, //name名字与轴线间距
						type: 'value',
						axisLine: {
							onZero: false
						}
					}],
					series: [{
						id: 'a',
						type: 'line',
						smooth: true,
						symbolSize: 0,
						data: [
							[0, 24.15],
							[0.02, 26.02],
							[0.08, 28.1],
							[0.18, 30.01],
							[0.3, 31.67],
							[0.46, 32.99],
							[0.66, 33.92],
							[0.88, 34.53],
							[1.12, 34.99],
							[1.42, 35.39],
							[1.72, 35.85],
							[2.06, 36.39],
							[2.42, 36.99],
							[2.82, 37.63],
							[3.24, 38.28],
							[3.68, 38.94],
							[4.14, 39.62],
							[4.64, 40.33],
							[5.14, 41.1],
							[5.68, 41.93],
							[6.22, 42.82],
							[6.8, 43.74],
							[7.38, 44.65],
							[8, 45.35],
							[8.62, 45.75],
							[9.26, 45.8],
							[9.9, 45.56],
							[10.58, 45.19],
							[11.26, 44.8],
							[11.94, 44.52],
							[12.64, 44.31],
							[13.34, 44.26],
							[14.04, 44.36],
							[14.76, 44.51],
							[15.46, 44.71],
							[16.2, 44.84],
							[16.92, 44.92],
							[17.64, 44.85],
							[18.38, 44.69],
							[19.1, 44.46],
							[19.84, 44.21],
							[20.56, 44.06],
							[21.28, 43.99],
							[22, 44.03],
							[22.72, 44.14],
							[23.46, 44.27],
							[24.16, 44.36],
							[24.88, 44.38],
							[25.58, 44.31],
							[26.28, 44.2],
							[26.98, 44.07],
							[27.68, 43.97],
							[28.36, 43.91],
							[29.04, 43.89],
							[29.72, 43.94],
							[30.38, 44.02],
							[31.04, 44.13],
							[31.68, 44.22],
							[32.34, 44.26],
							[32.98, 44.28],
							[33.6, 44.26],
							[34.22, 44.24],
							[34.84, 44.19],
							[35.44, 44.19],
							[36.04, 44.18],
							[36.64, 44.18],
							[37.2, 44.24],
							[37.78, 44.26],
							[38.34, 44.32],
							[38.9, 44.36],
							[39.44, 44.39],
							[39.98, 44.42],
							[40.5, 44.43],
							[41.02, 44.46],
							[41.52, 44.47],
							[42.02, 44.48],
							[42.52, 44.49],
							[42.98, 44.5],
							[43.46, 44.5],
							[43.92, 44.49],
							[44.36, 44.46],
							[44.8, 44.46],
							[45.22, 44.46],
							[45.62, 44.49],
							[46.02, 44.51],
							[46.4, 44.51],
							[46.78, 44.51],
							[47.14, 44.51],
							[47.48, 44.52],
							[47.82, 44.54],
							[48.14, 44.55],
							[48.44, 44.56],
							[48.72, 44.58],
							[48.98, 44.6],
							[49.24, 44.63],
							[49.46, 44.64],
							[49.68, 44.63],
							[49.86, 44.59],
							[50.02, 44.52],
							[50.18, 44.42],
							[50.3, 44.28],
							[50.4, 44.08],
							[50.48, 43.76],
							[50.52, 43.14],
							[50.56, 42.1],
							[50.56, 40.68],
							[50.54, 38.91],
							[50.48, 37.06],
							[50.4, 35.33],
							[50.28, 33.85],
							[50.14, 32.64],
							[49.94, 31.69],
							[49.74, 30.99],
							[49.5, 30.48],
							[49.22, 30.16],
							[48.9, 30.04],
							[48.56, 30.08],
							[48.2, 30.26],
							[47.78, 30.54],
							[47.36, 30.84],
							[46.9, 31.13],
							[46.4, 31.37],
							[45.9, 31.52],
							[45.36, 31.58],
							[44.8, 31.56],
							[44.2, 31.51],
							[43.6, 31.47],
							[42.98, 31.46],
							[42.34, 31.51],
							[41.66, 31.64],
							[40.98, 31.83],
							[40.3, 32.05],
							[39.58, 32.26],
							[38.86, 32.41],
							[38.14, 32.48],
							[37.4, 32.5],
							[36.64, 32.5],
							[35.88, 32.46],
							[35.12, 32.46],
							[34.34, 32.47],
							[33.56, 32.5],
							[32.78, 32.55],
							[31.98, 32.63],
							[31.18, 32.71],
							[30.38, 32.8],
							[29.6, 32.83],
							[28.78, 32.86],
							[27.98, 32.83],
							[27.18, 32.78],
							[26.38, 32.74],
							[25.58, 32.68],
							[24.8, 32.6],
							[24.02, 32.18],
							[23.24, 30.69],
							[22.48, 29],
							[21.72, 27.15],
							[20.98, 25.33],
							[20.24, 24.27],
							[19.48, 23.13],
							[18.74, 21.58],
							[18.02, 20.17],
							[17.28, 19.2],
							[16.54, 18.74],
							[15.82, 19.14],
							[15.08, 19.87],
							[14.38, 20.77],
							[13.66, 21.52],
							[12.98, 21.99],
							[12.3, 22.21],
							[11.62, 22.02],
							[10.96, 21.58],
							[10.32, 21.17],
							[9.7, 20.78],
							[9.08, 20.6],
							[8.48, 20.63],
							[7.9, 20.77],
							[7.32, 21.03],
							[6.76, 21.28],
							[6.22, 21.46],
							[5.7, 21.57],
							[5.2, 21.6],
							[4.72, 21.52],
							[4.26, 21.44],
							[3.82, 21.35],
							[3.4, 21.27],
							[3, 21.26],
							[2.62, 21.27],
							[2.26, 21.28],
							[1.94, 21.32],
							[1.62, 21.34],
							[1.34, 21.35],
							[1.08, 21.38],
							[0.86, 21.38],
							[0.66, 21.38],
							[0.48, 21.37],
							[0.34, 21.37],
							[0.2, 21.42],
							[0.12, 21.5],
							[0.04, 21.86],
							[0, 22.76]
						]
					}]
				},
				option3: {
					notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(220, 220, 220, 0.8)'
						}
					}]
				}
			};
		},
		components: {
			echarts
		},
		onLoad() {
			this.option = this.option2
		},
		methods: {
			/**
			 * 点击事件
			 * @param {Object} params
			 */
			echartsClick(params) {
				console.log('点击数据', params)
			},
			/**
			 * 切换数据
			 */
			updateClick() {
				if (this.option === this.option2) {
					this.option = this.option3
				} else {
					this.option = this.option2
				}
			}
		}
	};
</script>

<style></style>
